<template>
    <div>
        <el-form :model="form" :inline="true" :rules="rules" ref="form" class="login-container">
            <el-form-item label="查询的汉字" prop="text">
                <el-input v-model="form.text" placeholder="请输入汉字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="result-container">
            <el-row :gutter="20">
                <el-col :span="14">
                    <ul>
                        <li v-for="(item,i) in this.hanziPinyinInfo">
                            <p class="pinyin">
                                <el-dropdown v-if="item.pinyinInfo.length > 1" @command="handleClick"
                                    placement="bottom">
                                    <el-link class="el-dropdown-link" @click="Fayin(i,0)">
                                        {{item.pinyinInfo[0].pinyin1}}
                                        <i class="el-icon-arrow-down el-icon--right" style="font-size:12px"></i>
                                    </el-link>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(it,a) in item.pinyinInfo"
                                            :command="commandValue(i,a)">{{it.pinyin2.toLowerCase()}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-link v-else slot="reference" @click="Fayin(i,0)">{{item.pinyinInfo[0].pinyin1}}
                                </el-link>
                            </p>
                            <el-link slot="reference" @click="showDetail(item.text)">{{item.text}}
                            </el-link>
                        </li>
                        <li class="play" v-if="isShowAudio">
                            <p class="pinyin">
                                <i class="el-icon-video-play" @click="paly()"></i>
                            </p>
                            <p class="text">
                                <i class="el-icon-video-play" @click="palyText()"></i>
                            </p>
                        </li>
                        <div class="clearfix"></div>
                    </ul>
                </el-col>
                <el-col :span="10" class="historyLog">
                    <ul>
                        <li>
                            <span style="font-weight: bold;">历史查询记录</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="clearLog()">清空
                            </el-button>
                        </li>
                        <li v-for="(item,i) in this.tableData" style="">
                            <el-link type="info" @click="search(item)">{{i+1}}. {{item}}</el-link>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>

        <el-dialog :title="textDetail.text +' - 汉字学习'" :visible.sync="isShowDetail" width="90%">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-image :src="textDetail.handwritingImg"
                        style="width: 100px; height: 100px"></el-image>
                </el-col>
                <el-col :span="9">
                    <el-row class="synonym">
                        <el-col :span="24" class="title">
                            相关组词
                        </el-col>
                        <el-col :span="4" v-for="it in textDetail.groupsWords">
                            {{it}}
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="9" class="synonym">
                    <el-row>
                        <el-col :span="24">
                            <span class="title">近义词</span>
                            <span v-for="it in textDetail.synonym">{{it}}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <span class="title">反义词</span>
                            <span  v-for="it in textDetail.antonym">{{it}}</span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-tabs type="border-card" style="margin-top: 20px;">
                <el-tab-pane v-for="item in textDetail.pinyins">
                    <span slot="label">{{item.pinyin}} <i class="el-icon-video-play"
                            @click="palyMp3(item.audio)"></i></span>
                    <div class="paraphrase">
                        <p v-for="it in item.paraphrase" v-html="it"></p>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import api from '../api/pinyin.js'
const myAudio = new Audio();
export default ({
    name: 'loginPage',
    data() {
        return {
            isShowDetail: false,
            isShowAudio: false,
            textDetail: {
                text: undefined
            },
            hanziPinyinInfo: [],
            Audios: [],
            tableData: [],
            form: {
            },
            rules: {
                text: [
                    { required: true, message: "请输入汉字", trigger: "blur" },
                ]
            }
        }
    },
    // created() {
    //     this.showDetail("好");
    // },
    methods: {
        showDetail(text) {
            api.getHanziInfo(text).then(res => {
                this.textDetail = res.data.data;
            })
            this.isShowDetail = true;
        },
        onSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // 发送 POST 请求
                    api.getPinread(this.form.text).then(res => {
                        this.hanziPinyinInfo = res.data.data;
                        this.Audios = [];
                        this.isShowAudio = true;
                        if (this.tableData.includes(this.form.text) === false) {
                            this.tableData.push(this.form.text);
                        }
                    })
                }
            });
        },
        handleClick(command) {
            this.Fayin(command.text, command.fayin);
        },
        commandValue(i, a) {
            return {
                text: i,
                fayin: a
            }
        },
        Fayin(i, a) {
            this.Audios = [];
            var item = this.hanziPinyinInfo[i];
            item.pinyinInfo[a].audios.forEach(it => {
                this.Audios.push("/pinyin/" + it);
            })
            this.Audios.push("/api/anonymous/fayin/fayin?text=" + item.text + "&speed=3");
            this.palyAudio();
        },
        clearLog() {
            this.tableData = [];
        },
        search(text) {
            this.form.text = text;
            this.onSubmit()
        },
        palyMp3(url) {
            this.Audios = [];
            this.Audios.push(url);
            this.palyAudio();
        },
        //只对中文发音
        palyText() {
            let text = "";
            this.hanziPinyinInfo.forEach(item => {
                text += item.text;
            });
            this.Audios = [];
            this.Audios.push("/api/anonymous/fayin/fayin?text=" + text + "&speed=3");
            this.palyAudio();
        },
        paly() {
            this.Audios = [];
            this.hanziPinyinInfo.forEach(item => {
                item.pinyinInfo[0].audios.forEach(it => {
                    this.Audios.push("/pinyin/" + it);
                })
                this.Audios.push("/api/anonymous/fayin/fayin?text=" + item.text + "&speed=3");
            });
            this.Audios.push("/api/anonymous/fayin/fayin?text=" + this.form.text + "&speed=3");
            this.palyAudio();
        },
        palyAudio() {
            try {
                myAudio.src = this.Audios.shift();         //每次读数组第一个元素
                if (this.Audios.length > 1) {
                    myAudio.addEventListener('ended', this.playEndedHandler, false);	 //当媒介已抵达结尾时运行脚本
                }
                myAudio.play();
            } catch (error) {
                console.log("播放错误：", error);
            }
        },
        playEndedHandler() {
            try {
                myAudio.src = this.Audios.shift();
                myAudio.play();
                console.log(myAudio.src);
            } catch (error) {
                console.log("播放错误：", error);
            }
            !this.Audios.length && myAudio.removeEventListener('ended', this.playEndedHandler, false);//只有一个元素时解除绑定
        }
    }
})
</script>

<style lang="less" scoped>
.loginTabs {
    padding-top: 15px;
}

.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 10px auto;
    width: 80%;
    padding: 35px 35px 15px 35px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 0 25px #D0D0D0;
    text-align: center;
}

.input-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 0 25px #D0D0D0;
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.login_submit {
    margin: 10px auto 0px auto;
}

.result-container {
    margin: 20px auto;
    width: 80%;
    border-radius: 15px;
    background-clip: padding-box;
    padding: 35px 35px 15px 35px;
    border: 1px solid #F0F0F0;
}

.result-container ul {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.result-container li {
    list-style: none;
    float: left;
    padding: 5px;
}

.result-container li.pinyin {
    color: blue;
}

.result-container i {
    font-size: 20px;
    align-items: center
}

.historyLog {
    float: right;
}

.historyLog li {
    list-style: none;
    float: none;
    padding: 5px;
}

.synonym{
    line-height: 25px;
   
}
.synonym .title {
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
}

.synonym span {
    margin: 5px;
}

.paraphrase {
    height:  20em;
    overflow-y:auto;
    word-wrap: break-word !important;
    word-break: break-all !important;
}

@media screen and (min-width: 220px) and (max-width:600px) {
  .el-dialog{
    width: 90% !important;
  }
}

</style>